<template>
	<div>
		<el-dialog title="流程详情" :close-on-click-modal="false" v-model="visible" width="95%" @close="refreshEmit" >
			<el-container>
				<el-main>
					<v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
					</v-form-render>
				</el-main>
				<el-aside width="300px">
					<ApproveHisDetailFoot ref="processdetailfoot" :processId="processId"></ApproveHisDetailFoot>
				</el-aside> 
			</el-container>
		</el-dialog>
	</div>
</template>
<script lang="ts">
import { ref, toRefs, reactive, nextTick, defineComponent } from 'vue'
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import { workflowApi } from '/@/api/workflowapi'
import request from '/@/utils/request'
import { systemApi } from '/@/api/systemapi'
import ApproveHisDetailFoot from "./approveHisDetailFoot.vue" //流程处理记录
export default defineComponent ({
	props: {
		taskId: {
			type: String,
			required: true
		},
		processId: {
			type: String,
			required: true
		},
		busNo: {
			type: String,
			required: true
		},
		designerId: {
			type: String,
			required: true
		},
		designerCode: {
			type: String,
			required: true
		}
	},
	components: {
		ApproveHisDetailFoot
	},
	setup(props, ctx) {
		const vFormRef = ref()
		const processdetailfootRef = ref()
		const state = reactive({
			visible: false,
			formJson:{"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","jsonVersion": 3,"onFormCreated":"","onFormMounted":"","onFormDataChange":"","onFormValidate":""}},
			formData: {},
			optionData: {},
		})
		// 打开弹窗
		const openDialog = () => {
			state.visible = true
			//判断是不是自定义接口获取
			systemApi().getSysBusinessDesignerByCodeHasJson(props.designerCode).then((data2) => {
				if (data2 && data2.code === 0) {
					vFormRef.value.setFormJson(data2.data.newFormJson)
					nextTick(() => {
						if (data2.data.customizeApi === '1') {
							//自定义接口的情况下通过自定义接口获取表单业务数据
							request({
								url: data2.data.detailApiUrl + '/' + props.busNo,
								method: 'get',
							}).then((data0) => {
								//自定义接口的返回值需要满足json格式{"组件名称": "组件值", .....}
								vFormRef.value.setFormData(data0.data.formData)
							})
						} else {
							//通过公用的接口来获取表单业务数据
							systemApi().getBusinessCommonById(props.busNo).then((data1) => {
								if (data1 && data1.code === 0 && data1.data !== null ) {
									vFormRef.value.setFormData(data1.data.formData)
								}
							})
						}
					})
				}
			}).catch(() => {
				ElMessage.error('无法获取业务表单信息')
			})
		}
		const refreshEmit = () => {
			closeDialog()
			ctx.emit('refreshDataList')
		}
		// 关闭弹窗
		const closeDialog = () => {
			state.visible = false;
		}
		return{
			openDialog,
			closeDialog,
			refreshEmit,
			vFormRef,
			processdetailfootRef,
			...toRefs(state),
		}
	}
})
</script>

<style>

</style>